<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			html{
				font-size: 1rem;
			}
			#app16{
				height: 30rem;width: 30rem;background: pink;
			}
			p{
				width: 10rem;height: 10rem;background: blue;font-size: 2rem;color: red;
			}
		</style>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app16" >
			<ol>
				<li v-for="todo in todos">
			      {{ todo.text }}
			    </li>
			</ol>
			<p> {{message}}</p>
			<button v-on:click="test">增加1</button>
			<p>按钮被点击{{num}}次</p>
		</div>
		
	</body>
	<script>
		var app16=new Vue({
		  el: '#app16',
		  data:{
		  	message:'lj',
		  	num:0,
		  	todos: [
		      {text: 'foo' },
		      {text: 'Bar' }
		    ]
		  },
		methods:{
			test:function(){
				this.num += 1,
				this.message="css"
			}
		}
//		methods:{
//			test:function(){
//				this.num+=1,
//				if(num%2==0){
//					this.message="css"
//				}else{
//					this.message="lj"
//				}
//				
//			}
//		}
	})
		
	</script>
</html>
